<template>
	<div class="inviteGoods">
		<div class='container'>
			<div class='img-hard'>
				<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/invite_lh.png' />
			</div>
			<div class="goods" v-if="goods.length > 0" v-for="(item, indexCon) in goods">
				<div v-if="indexCon == 0" class='title-box'>
					<div class='titleGoods'>
						邀请<span class='max'>{{item.activeLimitCount}}</span>位好友可购买
					</div>
				</div>
				<div v-else-if="indexCon == 1" class='title-box'>
					<div v-if="item.activeAble" class='titleGoods levale-5'>
						邀请<span class='max'>{{item.activeLimitCount}}</span>位好友可购买
					</div>
					<div v-else class='titleGoods'>
						邀请<span class='max'>{{item.activeLimitCount}}</span>位好友可购买
					</div>
				</div>
				<div v-else-if="indexCon == 2" class='title-box'>
					<div v-if="item.activeAble" class='titleGoods levale-10'>
						邀请<span class='max'>{{item.activeLimitCount}}</span>位好友可购买
					</div>
					<div v-else class='titleGoods'>
						邀请<span class='max'>{{item.activeLimitCount}}</span>位好友可购买
					</div>
				</div>
				<div v-for="(goodsInfo,index) in item.goodsInfo" class='goods-box' @click="isShowModal (item,goodsInfo)">
					<div v-if="index == 0" class="goods-item">
						<div class='goods-img'>
							<img v-bind:src="goodsInfo.attaUrl" alt="" />
						</div>
						<div class='goods-info'>
							<div class='title ecs ecs-2'>
								{{goodsInfo.goodsTitle}}
							</div>
							<div class='base-price'>
								原价：￥{{tofixed(goodsInfo.basePrice)}}
							</div>
							<div v-if="!item.activeAble" class='price'>¥1.00</div>
							<div v-else-if="item.activeAble && indexCon ==0 " class='price levale-3'>¥1.00</div>
							<div v-else-if="item.activeAble && indexCon ==1 " class='price levale-5'>¥1.00</div>
							<div v-else-if="item.activeAble && indexCon ==2 " class='price levale-10'>¥1.00</div>
						</div>
					</div>
					<div v-else class="goods-item marginL">
						<div class='goods-img'>
							<img v-bind:src="goodsInfo.attaUrl" alt="" />
						</div>
						<div class='goods-info'>
							<div class='title ecs ecs-2'>
								{{goodsInfo.goodsTitle}}
							</div>
							<div class='base-price'>
								原价：￥{{tofixed(goodsInfo.basePrice)}}
							</div>
							<div v-if="!item.activeAble" class='price'>¥1.00</div>
							<div v-else-if="item.activeAble && indexCon ==0 " class='price levale-3'>¥1.00</div>
							<div v-else-if="item.activeAble && indexCon ==1 " class='price levale-5'>¥1.00</div>
							<div v-else-if="item.activeAble && indexCon ==2 " class='price levale-10'>¥1.00</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='footer-box'>
			<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/invite_footer.png' />
		</div>
		<div class='modal' v-show="modal" @click="closeModal">
			<div class='show-msg'  @click="closeModal">
				<div class='flex flex-item-center close-modal'>
					<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/invite_close.png' />
				</div>
				<div class='flex flex-c flex-item-center modal-content'>
					<span>您还未获得1元购资格</span>
					<span>快去邀请您的好友协助您吧！</span>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import Api from '@/util/api'
	import util from '@/util/util'
	export default {
		data() {
			return {
				goods: [],
				modal: false
			}
		},
		created: function() {
			this.token = util.getUserToken();
			if(!this.token ){
			    util.login();
			    return;
			}
			window.loginCallBack = (token) => {
				this.token = token;
			}
			this.init(this.token);

		},
		beforeMounted: function() {

		},
		mounted: function() {

		},
		computed: {

		},
		methods: {
			init () {
				const res = this.post(Api.mgmQueryRewardInfo, {}, {token:this.token});
				res.then( data => {
					if (data.code == '200') {
						this.showAll = true;
						let res = data.data;
						this.goods = res;
					} else{
						this.$vux.loading.hide()
						this.$vux.toast.text(data.msg, 'middle')
					}

				})
			},


			tofixed (val){
				return Number(val/100).toFixed(2)
			},
			isLogin() {
				var token = util.getUserToken();
				if(!token) {
					util.login();
				}
			},
			isShowModal (item,goodsInfo) {
				if (!item.activeAble) {
					this.modal = true;
				} else{
					//点击图片跳转的链接
					this.modal = false;
					let str = 'huaban://showActivityCommodityDetail?id='+goodsInfo.goodsId+'&activityId='+goodsInfo.activityId;
					window.location = str;

				}
			},
			closeModal () {
				this.modal = false;
			}
		}
	}
</script>

<style lang="less" rel="stylesheet/less" scoped="scoped">
	@import '../../assets/less/main.less';
	.inviteGoods {
		width: 100%;
		background-color: #4937a6;
		min-height: 100vh;
		.container {
			padding: 0 0.3rem;
			min-height: 100%;
			.img-hard {
				height: 4.6rem;
				clear: both;
				img {
					height: 4.6rem;
					width: 100%;
					float: left;
				}
			}
			.goods {
				height: 5.2rem;
				.title-box {
					.titleGoods {
						font-size: 0.33rem;
						font-family: "PingFang SC";
						color: rgb(251, 205, 0);
						height: 0.7rem;
						line-height: 0.7rem;
						text-align: center;
						border-bottom: 0.03rem solid rgb(251, 205, 0);
						.max {
							font-size: 0.46rem;
							font-weight: bold;
							padding: 0 0.02rem;
						}
					}
					.levale-3 {
						color: #fbcd00;
					}
					.levale-5 {
						color: #ff9845;
						border-bottom: 0.03rem solid #ff9845;
					}
					.levale-10 {
						color: #ff6e6a;
						border-bottom: 0.03rem solid #ff6e6a;
					}
				}
				.goods-box {
					margin-top: 0.2rem;
					width: 100%;
					.marginL{
						margin-left: 0.2rem;
					}
					.goods-item {
						float: left;
						width: 2.16rem;
						background: white;
						border-radius: 0.1rem;
						zoom:1;
 						&:after {
 							clear:both;
 							content:'';
 							display:block;
 							width: 0;
 							height: 0;
 							visibility:hidden;
 						}
						.goods-img {
							height: 2.2rem;
							border-bottom: 0.01rem solid #f2f2f2;
							border-radius: 0.1rem 0.1rem 0 0;
							img {
								width: 1.96rem;
								height: 1.96rem;
								margin: 0.1rem;
							}
						}
						.goods-info {
							.title {
								height: 0.7rem;
								line-height: 0.35rem;
								word-wrap: break-word;
								font-size: 0.26rem;
								font-family: "PingFang SC";
								color: rgb(0, 0, 0);
								padding: 0 0.04rem;
							}
							.base-price {
								font-size: 0.2rem;
								font-family: "PingFang SC";
								color: rgb(121, 121, 121);
								height: 0.4rem;
								line-height: 0.4rem;
								padding: 0 0.04rem;

							}
							.price {
								height: 0.54rem;
								font-size: 0.3rem;
								font-family: "PingFang SC";
								color: rgb(255, 255, 255);
								text-align: center;
								background-color: #a0a0a0;
								line-height: 0.54rem;
								padding: 0 0.1rem;
								border-radius: 0 0 0.1rem 0.1rem;
							}
							.levale-3 {
								background-color: #fbcd00;
							}
							.levale-5 {
								background-color: #ff9845;
							}
							.levale-10 {
								background-color: #ff6e6a;
							}
						}
					}
				}
			}
		}
		.footer-box {
			height: 2.73rem;
			clear: both;
			img {
				height: 2.73rem;
				width: 100%;
				float: left;
			}
		}
		.modal {
			position: fixed;
			z-index: 999;
			background-color: rgba(0, 0, 0, 0.6);
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
		}

		.modal .show-msg {
			border-radius: 0.08rem;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			left: 50%;
			top: 40%;
		}

		.show-msg {
			width: 5.6rem;
			height: 3rem;
			position: absolute;
			background-color: #fff;
		}

		.close-modal {
			width: 0.64rem;
			height: 0.64rem;
			border-radius: 50%;
			background-color: #fff;
			position: absolute;
			top: -0.22rem;
			right: -0.22rem;
		}
		.close-modal img {
			width: 0.3rem;
			height: 0.3rem;
		}
		.modal-content {
			height: 100%;
		}
		.modal-content span {
			font-size: 0.28rem;
			font-family: "PingFang SC";
			color: rgb(73, 55, 166);
			text-align: center;
			display: block;
			line-height: 0.4rem;
		}
	}
</style>
